<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <img src="https://img2.baidu.com/it/u=2893147358,3393430132&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
        <input type="file" name="avator">
    </form>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        // 获取元素  
        // form 表单  
        // img 元素
        // input 元素  
        // 表单事件 有个  change 
        const inp = document.querySelector('input');
        const fele = document.querySelector('form');
        const img = document.querySelector('img');


        inp.onchange = function(){
            // console.log(inp.files); 获取整个表单的内容  
            // 如果没选择文件 空 
            // 如果选择了 是个伪数组 
            // 是否选择了文件 
            const info = inp.files[0];
            if(!info){
                return 
            }

            // console.log(info.type)
            // 判断上传的是否是图片

            // image
            if(!/^image/.test(info.type)){
                return alert('只能上传图片')
            }


            // 收集文件信息  
            const fm = new FormData(fele);


            axios.post('/api/users/avator',fm)
            .then(res=>{
                // console.log(res.data.info.path)
                img.src = res.data.link
            })
        }



    </script>
</body>
</html>